<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>节点添加测试文档</title>
  <style>
    *{
      margin: 0px;
      padding: 0;
    }
    #Container{
      width: 500px;
      height: 20px;
      margin: 50px;
      border: 1px solid black;

    }

    .LineBlock{
      border: 1px solid black;
    }
    .Blocks{
      display: block;
      min-width: 25px;
      height: 10px;
      background-color: cornsilk;
      border: 3px solid ;
      margin: 10px;
      float: left;
    }
    .BlackBlock{
      display: block;
      height: 10px;
      width: 10px;
      background-color: black;
    }
    p{
      display: Block;
      width: 100px;
      height: 100px;
      border: 1px solid red;
    }
    span{
      margin: 4px;  
    }
    .btn{
      width: 100px;
      height: 100px;
    }
  </style>
</head>
<body>
  <div id="Container">

  </div>
  <button id="btn" class="btn">增加</button>
  <button id="delete" class="btn">删除最后一个</button>
  <button id="add">数字加一</button>
</body>
</html>
<script>
  //添加新行
  var Btn = document.getElementById('btn');
  Btn.addEventListener('click',CreateFour)
  function Create(){
  var Dot = document.getElementById('Container');
  var NewNode = document.createElement('div');
  //
  var NewSpan = document.createElement('span');
  NewSpan.className='Blocks';
  NewNode.appendChild(NewSpan);
  Dot.insertBefore(NewNode,Dot.childNodes[0]);
}


//创建四行元素
function CreateFour(){
  ChangeBlackBlock();
  ChangeBlackBlock();
  ChangeBlackBlock();
  ChangeBlackBlock();
}
  //创建span元素并设置类名
  function ChangeBlackBlock(){
    var Dot = document.getElementById('Container');
    Dot.style.display='flex';
    var NewNode = document.createElement('div');
    NewNode.className='LineBlock'
    var NewSpan = document.createElement('span');
    NewSpan.className='BlackBlock';
    NewNode.appendChild(NewSpan);
    Dot.insertBefore(NewNode,Dot.childNodes[0]);
   }

   //获取元素的位置坐标（判断触底使用）
  // var Line = document.getElementById('Line');
  // console.log(Line.offsetLeft);

//删除最后一个节点
  var Remove = document.getElementById('delete');
  Remove.addEventListener('click',XXX);
  function XXX() {
  var Dots = document.getElementById('Container');
  var Blocks = document.getElementsByClassName('span');
  Dots.removeChild(Dots.childNodes[Blocks.length])
  }

  
  let score = '0';
  var add = document.getElementById('add');
  add.addEventListener('click',function () {
    score++;
    console.log(score);
  })
</script>